<template>
    <div class="wrapper">
        <span class="back-btn" @click="router.back()">
            <el-icon>
                <Back />
            </el-icon>
        </span>
        <div class="header">
            <div class="a">
                <LabelTitle title="基本情况" />
                <el-form-item label-width="130px" v-for="item in formList" :key="item.label" :label="item.label">
                    <el-input :placeholder="'请输入' + item.label" :disabled="item.disabled ? true : false" type="text"
                        v-model="formData[item.value]" />
                </el-form-item>
                <el-form-item label-width="130px" v-for="item in selectList" :key="item.label" :label="item.label">
                    <el-select fit-input-width v-model="formData[item.value]" placeholder="Select" size="large">
                        <el-option v-for="it in  item.data" :key="it.value" :label="it.label" :value="it.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label-width="200px" v-for="item in numberList" :key="item.label" :label="item.label">
                    <el-input :placeholder="'请输入' + item.label" type="number" v-model="formData[item.value]" />
                </el-form-item>
                <el-form-item label-width="130px" label="申请日期">
                    <el-date-picker v-model="applyDate" type="date" disabled />
                </el-form-item>
                <el-form-item label-width="130px" label="交货时间">
                    <el-date-picker format="YYYY-MM-DD" v-model="deliveryTime" type="datetimerange" range-separator="到"
                        start-placeholder="开始日期" end-placeholder="结束日期" />
                </el-form-item>


                <el-divider border-style="dashed" />


            </div>
            <div class="b">
                <LabelTitle title="煤质要求" />
                <el-form-item label-width="230px" v-for="item in bFormList" :key="item.label" :label="item.label">
                    <el-input type="number" v-model="formData[item.value]" />
                </el-form-item>

                <el-form-item label-width="230px" label="干燥无灰基挥发">
                    <el-input style="width:100px" type="number" v-model="dryGray.start" />(%)
                    <span style="margin : 0 10px">至</span>
                    <el-input style="width:100px" type="number" v-model="dryGray.end" />(%)
                </el-form-item>

            </div>
        </div>
        <div style="display:flex;border-top: 1px solid #eee;padding-top: 1rem;">
            <el-button type="primary" @click="handleClick">注册</el-button>
            <el-button @click="store">保存</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { reactive, ref, watch } from "vue";
import { buyerListingApi } from "../../../../api/user";
import LabelTitle from "../../../../components/LabelTitle/index.vue";
import { coalType, businessType, transportMethod, settlementMethod, checkMethod } from "../../../../select/user";
import { useUserStore } from "../../../../store/user";
import { checkPropEmpty, responseCallback } from "../../../../utils";
import { Back } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";


const router = useRouter();
const applyDate = ref(Date.now());

const deliveryTime = ref([new Date(), new Date()])
const dryGray = reactive({
    start: 0,
    end: 0
})


const { id: applicantId, companyName } = useUserStore().$state.company;
const { id, user } = useUserStore().$state;
const formData = ref({
    id,
    user,
    applicantId,
    companyName,
    "signer": "",
    "applyDate": Date.now(),
    "deliveryTime": Date.now() + "-" + Date.now(),
    "coalType": 1,
    "businessType": 1,
    "transportMethod": 1,
    "address": "",
    "settlementMethod": 1,
    "count": 100,
    "checkMethod": 1,
    "s": 71,
    "hot": 0,
    "performance": 0,
    "depositPayment": 0,
    "water": 69,
    "dryS": 0,
    "dryGray": "0-0"
});

watch(dryGray, (value) => {
    formData.value.dryGray = value.start + "-" + value.end
})
watch(deliveryTime, (value) => {
    const [start, end] = value;
    formData.value.deliveryTime = start.valueOf() + "-" + end.valueOf();
})

const formList = [{
    label: "申请单位",
    value: "companyName",
    disabled: true
}, {
    label: "申请人",
    value: "user",
    disabled: true
}, {
    label: "签发人",
    value: "signer",
}, {
    label: "交货地点",
    value: "address",
}]

const selectList = [{
    label: "煤炭类型",
    value: "coalType",
    data: coalType
}, {
    label: "商业类型",
    value: "businessType",
    data: businessType
}, {
    label: "运输方式",
    value: "transportMethod",
    data: transportMethod
}, {
    label: "结算方式",
    value: "settlementMethod",
    data: settlementMethod
}, {
    label: "验收方式",
    value: "checkMethod",
    data: checkMethod
}]

const numberList = [{
    label: "采购数量（万吨）",
    value: "count"
}, {
    label: "报价保证金缴纳（元/吨）",
    value: "depositPayment"
}, {
    label: "履约保证金缴纳（元/吨）",
    value: "performance"
}]

const bFormList = [{
    label: "收到基低位发热量(KCal/kg)",
    value: "hot"
}, {
    label: "收到基全硫(%)",
    value: "s"
}, {
    label: "空干基全硫(%)",
    value: "dryS"
}, {
    label: "全水分(%)",
    value: "water"
},]

const handleClick = function () {
    const data = {
        ...formData.value
    };
    // if (checkPropEmpty(data)) {
    if (true) {
        responseCallback({
            promise: buyerListingApi(data),
            successMessage: "挂牌成功，可以到我的买方挂牌信息查看",
            cb() {
                router.back();
                setTimeout(() => {
                    location.reload();
                }, 1000);
            }
        })

    } else {
        ElMessage({
            message: "请填写完整信息",
            type: "warning"
        })
    }
}
const storeKey = "buyerListing";
(function recover() {
    const item = localStorage.getItem(storeKey)
    if (item) {
        const obj = JSON.parse(item);
        formData.value = obj;
        formData.value.applyDate = Date.now();
        formData.value.user = user;
        formData.value.companyName = companyName;
        if (obj.deliveryTime) {
            deliveryTime.value = obj.deliveryTime.split("-").map(n => new Date(+n));
        }
        if (obj.dryGray) {
            const [start, end] = obj.dryGray.split("-").map(n => +n);
            dryGray.start = start;
            dryGray.end = end;
        }
        ElMessage({
            message: "已经恢复上次保存的数据",
            type: "success"
        })
    }
})();


const store = function () {
    localStorage.setItem(storeKey, JSON.stringify({
        ...formData.value
    }))
    ElMessage({
        message: "保存成功",
        type: "success"
    })
}


</script>

<style lang="less" scoped>
.wrapper {
    position: relative;
}

.back-btn {
    position: absolute;
    left: 0;
    top: -10px;
    transform: translateY(-100%);
    width: 150px;
    font-size: 30px;
    cursor: pointer;
    color: var(--el-color-primary);
    transition: all .5s;

}

.a {
    .el-form-item {
        width: 30%;
        display: inline-flex;
        margin-right: 10px;

    }

    .el-select--large {
        width: 100%;
    }
}

.b {
    .el-form-item {
        width: 50%;
        display: inline-flex;

    }
}
</style>